<template>
  <div>
    <ButtonGroup
      :options="buttons"
      class="button-container"
      @click="handleButtonClick"
    />
    <mainTable
      :columns="columns"
      :data-source="dataSource"
      :row-selection="rowSelectionMixin"
      :pagination="false"
      @number-click="handleNumberClick"
    />
  </div>
</template>

<script>
import {
  postBusinessContractList,
  postBusinessContractDelete,
} from '@/api/business';
import mixinTable from '@/mixins/mixin-table.js';
import mainTable from './mainTable.vue';
export default {
  components: {
    mainTable,
  },
  mixins: [mixinTable],
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    opportunityId: {
      type: [String, Number],
      default: undefined,
    },
    opportunityNo: {
      type: String,
      default: undefined,
    },
    opportunityName: {
      type: String,
      default: undefined,
    },
    customerCode: {
      type: String,
      default: undefined,
    },
    customerShortName: {
      type: String,
      default: undefined,
    },
    buttons: {
      type: [Array],
      default: () => [
        {
          key: 'relevance',
          type: 'primary',
          label: '新增合同',
          icon: 'plus',
        },
      ],
    },
  },
  data() {
    return {};
  },
  computed: {
    typeOptions() {
      return this.$store.state.dictionary.dict['agreement_type'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['agreement_status'] || {};
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '合同编号',
          dataIndex: 'contract.contractNo',
          width: 150,
          sorter: true,
          scopedSlots: { customRender: 'contract.contractNo' },
        },
        {
          align: 'center',
          title: '合同名称',
          dataIndex: 'contract.contractName',
          width: 150,
          ellipsis: true,
          sorter: true,
        },
        {
          align: 'center',
          title: '合同类型',
          dataIndex: 'contract.contractType',
          width: 100,
          ellipsis: true,
          sorter: true,
          customRender: text => this.typeOptions[text],
        },
        {
          align: 'center',
          title: '合同状态',
          dataIndex: 'contract.contractStatus',
          customRender: text => this.stateOptions[text],
          width: 100,
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '销售合同号',
          dataIndex: 'contract.salesContractNo',
          width: 160,
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'contract.createUserName',
          width: 100,
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'contract.createTime',
          width: 150,
          sorter: true,
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    // 获取合同列表
    async getList() {
      const res = await postBusinessContractList({
        opportunityId: this.opportunityId,
        bizType: '1',
        status: '1',
      });
      this.dataSource = res.data.data;
    },
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    relevanceCallback() {
      const routeUrl = this.$router.resolve({
        path: '/contract-info',
        query: {
          opportunityNo: this.opportunityNo,
          customerShortName: this.customerShortName,
          opportunityId: this.opportunityId,
          opportunityName: this.opportunityName,
          customerCode: this.customerCode,
        },
      });
      window.open(routeUrl.href);
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
}
</style>
